<template>
    <div>
        
         <div class="top"> 
           <el-button type="primary" >新增员工</el-button>
           <el-button type="danger"  @click="exportProcess">导出</el-button>
           <el-button type="warning">fuze</el-button>
          
        	<div class="xls" >
				 <!-- <el-button type="success">导入</el-button> -->
                 <span>导入</span>
				<input
				    type="file"
				    accept=".xls,.xlsx"
				    class="upload-file"
					ref="uploadImgBtn"
					@change="Excel($event)" />
			</div>
         </div>
        
        <!-- 表格- -->
       
  <el-table :data="data.tableData" border style="width: 100%">
    <el-table-column  label="序号" type="index" />
    <el-table-column prop="username" label="姓名"  />
    <el-table-column prop="mobile" label="手机号" />
    <el-table-column prop="timeOfEntry" label="入职日期" />
    <el-table-column prop="formOfEmployment" label="聘用形式"  sortable >
      <!-- 插槽   自定义内容 -->
        <template #default="scope">
        <el-tag
          :type="scope.row.formOfEmployment === '0' ? '' : 'success'"
          disable-transitions
          >{{ scope.row.formOfEmployment==0?"非正式":'正式'}}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="correctionTime" label="转正日期" />
    <el-table-column prop="workNumber" label="工号" />
    <el-table-column prop="departmentName" label="部门" />

  </el-table>


    </div>
</template>
<script setup>
//在文件中
import * as XLSX from "xlsx";

import { ref, reactive, toRefs } from "vue";
import { getuserList, importEmployee } from "@/http/api";
// 声明的数据
let data = reactive({
  tableData: []
});
const pagelist = reactive({
  page: 1,
  size: 100
});
const { tableData } = toRefs(data);
let total = ref(0);
getuserList(pagelist).then(res => {
  // console.log(res,62);
  data.tableData = res.data.rows;
  total.value = res.data.total;
  console.log(data.tableData, "5285");
  
});

// // 导出 二
// // 1- 获取数据并且处理完的数据
//    onExportFn=()=>{
//       // 1-请求获取所有的数据
//       // {data} 是对请求拿到的数据进行结构
//       const { data } = getuserList({ page: 1, size: this.total })
//       // 1-1 此时list里面保存的是所有的员工列表信息
//       const list = data.rows
//       console.log(list)
//       // 2-2 对数据进行处理 此时FilnalData 拿到的就我们要的数据格式  
//       // 此处我封装成了一个函数 onSortList 并且将拿到的list数据传入该方法
//       return this.onSortList(list)
//     };
    
//    onSortList=(list)=> {
//       // 2-1 先定义排列顺序  这里通常有一个学术名叫做对照表
//       const sortOrder = [
//         'username',
//         'mobile',
//         'timeOfEntry',
//         'formOfEmployment',
//         'correctionTime',
//         'workNumber',
//         'departmentName',
//       ]
//       // FilnalData 用来存放最后的数据
//       const FilnalData = []
//       list.forEach((item) => {
//         const arr = []
//         sortOrder.forEach((obj) => {
//           if (obj === 'formOfEmployment') {
//             arr.push(item[obj] === 1 ? '正式' : '非正式')
//           } else {
//             arr.push(item[obj])
//           }
//         })
//         FilnalData.push(arr)
//       })
//       return FilnalData
//   };
//     // 3- 此时数据已经处理完毕，那么就可以调用export_json_to_excel方法来进行导出表格
//     onOrdinaryExport=()=> {
//       this.ExportLoading = true
//       // onExportFn() 这里是一个primise异步方法，所以要用await
//       const FilnalData = this.onExportFn()
//       //  import('@/vendor/Export2Excel') 懒加载  导入后，拿到excel对象 的对象中有export_json_to_excel 方法
//       import('@/vendor/Export2Excel').then((excel) => {
//         excel.export_json_to_excel({
//           header: [
//         '姓名',
//         '手机号',
//         '入职日期',
//         '聘用形式',
//         '转正日期',
//         '工号',
//         '部门',
//       ], //表头 必填
//           data: FilnalData, //具体数据 必填
//           filename: '员工信息表格',
//           autoWidth: true,
//           bookType: 'xlsx',
//         })
//       })
//       this.ExportLoading = false
//     }


// 导出数据
const exportProcess = () => {
  let exportData = [];
  //导出数据结构构造
  tableData.value.forEach(item => {
    exportData.push({
      username: item.username,
      mobile: item.mobile,
      timeOfEntry: item.timeOfEntry,
      formOfEmployment: item.formOfEmployment,
      correctionTime: item.correctionTime,
      workNumber: item.workNumber,
      departmentName: item.departmentName,
    });
  });
  //导出表头设计
  let head = {
    username: "姓名",
    // departmentName: "部门",
    mobile:"手机号",
    timeOfEntry:"入职日期",
    formOfEmployment:"聘用形式",
    correctionTime:"转正日期",
    workNumber:"工号",
    departmentName:"部门",


  };
  //表头数据切换   遍历循环出所有数据    循环所有数据找出数据表头相符合的数据
  const list = exportData.map(item => {
    const obj = {};
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k];
      }
    }
    return obj;
  });
  // 创建工作表
  const data = XLSX.utils.json_to_sheet(list);
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, "data");
  // 生成文件并下载
  XLSX.writeFile(wb, "导出工序.xlsx");
};
//   导入数据
function Excel(w) {
  // console.log(w);
  const files = w.target.files;
  if (files.length <= 0) {
    return false;
  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    return false;
  }
  // 读取表格
  const fileReader = new FileReader();
  console.log(fileReader);
  fileReader.onload = ev => {
    const workbook = XLSX.read(ev.target.result, {
      type: "binary"
    });
    const wsname = workbook.SheetNames[0];
    const xl = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
    console.log(xl, 132);
    dealExcel(xl); //...对数据进行自己需要的操作
   
    // tableData.value = xl;
    // tableData.value.unshift(...xl)
  };
  fileReader.readAsBinaryString(files[0]);
}

function dealExcel(xl) {
  let keymap = {
    // 根据所要导入的文件转换开头
    姓名: "username",


    手机号:"mobile",
     入职日期:"timeOfEntry",
    聘用形式:"formOfEmployment",
    转正日期:"correctionTime",
    workNumber:"工号",
    部门: "departmentName",
   
  };
  console.log(xl);
  xl.forEach(sourceObj => {
    Object.keys(sourceObj).map(keys => {
      let newKey = keymap[keys];
      if (newKey) {
        sourceObj[newKey] = sourceObj[keys];
        delete sourceObj[keys];
      }
      console.log( 147  ,sourceObj);
    });

  })
    //   importEmployee(xl).then(res => {
    //   console.log(res, 147);
    // })

}

</script>






<style>
/* .top{
    height: 100px;
    background-color: #fff;
    width: 100px;
} */
* {
  margin: 0;
  padding: 0;
}
.top {
  display: flex;
  height: 80px;
  line-height: 80px;
  background-color: #fff;
}
.xls {
  width: 60px;
  height: 32px;
  margin-right: 10px;
  background: rgba(126, 156, 255);
  border-radius: 5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.xls > input {
  position: absolute;
  width: 80px;
  height: 52px;
  opacity: 0;
  cursor: pointer;
  z-index: 99;
}
</style>

